<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="A Javascript-optional AJAX library featuring declarative, REST-ful bindings">
  <meta name="author" content="">
  <link rel="shortcut icon" href="./img/icon.png">

  <title>Intercooler.JS - The Javascript-optional AJAX library</title>

  <!-- Bootstrap core CSS -->
  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Crete+Round:400italic,400" rel="stylesheet" type="text/css">
  <link
    href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,300,400italic,400,600italic,600,700italic,700,800italic,800"
    rel="stylesheet" type="text/css">

  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  <![endif]-->
  <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="https://code.jquery.com/qunit/qunit-1.12.0.js"></script>
  <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="./intercooler-0.3.0.js"></script>
  <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.12.0.css">
  <script>
    $(function () {
      Intercooler.defaultTransition('none');
    });
  </script>
</head>
<body>

<div class="container">
  <h1>IntercoolerJS Test Suite</h1>

  <p>Below are all the tests for the IntercoolerJS library. New tests should follow the existing templates</p>
</div>

<div class="container">
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
</div>

<div class="container">


<div class="row">
  <div class="col-md-12">
    <h2>Core Tests</h2>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <hr/>
    <div id="ic-src-div1" ic-src="/attr-test-1"></div>
    <div id="ic-post-to-div1" ic-post-to="/attr-test-1"></div>
    <div id="ic-append-from-div1" ic-append-from="/attr-test-1"></div>
    <div id="ic-prepend-from-div1" ic-prepend-from="/attr-test-1"></div>
    <div id="ic-style-src-div1" ic-style-src="color:/attr-test-1"></div>
    <div id="ic-attr-src-div1" ic-attr-src="style:/attr-test-1"></div>
    <script>
      test("IC attributes are set on elements", function () {
        ok($('#ic-src-div1').attr('ic-id') != null, "Has ID");
        ok($('#ic-src-div1').attr('ic-fingerprint') != null, "Has Fingerprint");
        ok($('#ic-src-div1').attr('ic-last-refresh') != null, "Has Last Refresh");

        ok($('#ic-post-to-div1').attr('ic-id') != null, "Has ID");
        ok($('#ic-post-to-div1').attr('ic-fingerprint') != null, "Has Fingerprint");
        ok($('#ic-post-to-div1').attr('ic-last-refresh') != null, "Has Last Refresh");

        ok($('#ic-append-from-div1').attr('ic-id') != null, "Has ID");
        ok($('#ic-append-from-div1').attr('ic-fingerprint') != null, "Has Fingerprint");
        ok($('#ic-append-from-div1').attr('ic-last-refresh') != null, "Has Last Refresh");

        ok($('#ic-prepend-from-div1').attr('ic-id') != null, "Has ID");
        ok($('#ic-prepend-from-div1').attr('ic-fingerprint') != null, "Has Fingerprint");
        ok($('#ic-prepend-from-div1').attr('ic-last-refresh') != null, "Has Last Refresh");

        ok($('#ic-style-src-div1').attr('ic-id') != null, "Has ID");
        ok($('#ic-style-src-div1').attr('ic-fingerprint') != null, "Has Fingerprint");
        ok($('#ic-style-src-div1').attr('ic-last-refresh') != null, "Has Last Refresh");

        ok($('#ic-attr-src-div1').attr('ic-id') != null, "Has ID");
        ok($('#ic-attr-src-div1').attr('ic-fingerprint') != null, "Has Fingerprint");
        ok($('#ic-attr-src-div1').attr('ic-last-refresh') != null, "Has Last Refresh");
      });
    </script>
  </div>
</div>

<div id="ic-src-div2" ic-src="/basic_update">Foo</div>
<script>
  test("Simple update", function () {
    Intercooler.addURLHandler({
      "url": "/basic_update",
      "get": function (url, params) {
        return '<div id="ic-src-div2" ic-src="/basic_update">Bar</div>'
      }
    });
    equal($('#ic-src-div2').text(), "Foo", "Updated");
    Intercooler.refresh($("#ic-src-div2"));
    equal($('#ic-src-div2').text(), "Bar", "Updated");
  });
</script>

<div id="ic-src-div3" ic-src="/deps_test1">Foo</div>
<button id="ic-post-to-btn1" ic-post-to="/deps_test1">Click</button>

<script>
  test("Dependency update w/ POST", function () {
    var text = "Foo";
    Intercooler.addURLHandler({
      "url": "/deps_test1",
      "get": function (url, params) {
        return '<div id="ic-src-div3" ic-src="/deps_test1">' + text + '</div>';
      },
      "post": function (url, params) {
        text = "Bar"
      }
    });
    equal($('#ic-src-div3').text(), "Foo", "Updated");
    $("#ic-post-to-btn1").click();
    equal($('#ic-src-div3').text(), "Bar", "Updated");
  });
</script>

<div id="ic-src-div6" ic-src="/deps_put_test1">Foo</div>
<button id="ic-put-to-btn1" ic-put-to="/deps_put_test1">Click</button>

<script>
  test("Dependency update w/ PUT", function () {
    var text = "Foo";
    Intercooler.addURLHandler({
      "url": "/deps_put_test1",
      "get": function (url, params) {
        return '<div id="ic-src-div6" ic-src="/deps_put_test1">' + text + '</div>';
      },
      "put": function (url, params) {
        equal(params['_method'], "PUT");
        text = "Bar";
      }
    });
    equal($('#ic-src-div6').text(), "Foo", "Updated");
    $("#ic-put-to-btn1").click();
    equal($('#ic-src-div6').text(), "Bar", "Updated");
  });
</script>

<div id="ic-src-div7" ic-src="/deps_delete_test1">Foo</div>
<button id="ic-delete-from-btn1" ic-delete-from="/deps_delete_test1">Click</button>
<script>
  test("Dependency update w/ DELETE", function () {
    var text = "Foo";
    Intercooler.addURLHandler({
      "url": "/deps_delete_test1",
      "get": function (url, params) {
        return '<div id="ic-src-div7" ic-src="/deps_delete_test1">' + text + '</div>';
      },
      "delete": function (url, params) {
        equal(params['_method'], "DELETE");
        text = "Bar";
      }
    });
    equal($('#ic-src-div7').text(), "Foo", "Updated");
    $("#ic-delete-from-btn1").click();
    equal($('#ic-src-div7').text(), "Bar", "Updated");
  });
</script>

<span id="get-from-target"></span>
<button id="ic-get-from-btn1" ic-get-from="/get_from_test" ic-target="#get-from-target">Click</button>
<script>
  test("ic-get-from test", function () {
    var text = "Foo";
    Intercooler.addURLHandler({
      "url": "/get_from_test",
      "get": function () {
        return "foo";
      }
    });
    equal($('#get-from-target').text(), "", "Pre");
    $("#ic-get-from-btn1").click();
    equal($('#get-from-target').text(), "foo", "Updated");
  });
</script>

<div id="ic-src-div8">Foo</div>
<button id="ic-delete-from-btn2" ic-delete-from="/deps_delete_test2" ic-target="#ic-src-div8">Click</button>

<script>
  test("DELETE with removal", function () {
    Intercooler.addURLHandler({
      "url": "/deps_delete_test2",
      "delete": function (url, params) {
        return {
          'headers': {
            'X-IC-Remove': true
          },
          'body': ""
        }
      }
    });
    $("#ic-delete-from-btn2").click();
    equal($('#ic-src-div8').length, 0);
  });
</script>

<div id="ic-src-div4" ic-src="/deps_test2">Foo</div>
<button id="ic-post-to-btn2" ic-post-to="/deps_test2/super">Clicked</button>
<script>
  test("Dependency on updated superpath", function () {
    var text = "Foo";
    Intercooler.addURLHandler({
      "url": "/deps_test2",
      "get": function (url, params) {
        return '<div id="ic-src-div4" ic-src="/deps_test2">' + text + '</div>';
      },
      "post": function (url, params) {
        text = "Bar"
      }
    });

    equal($('#ic-src-div4').text(), "Foo", "Updated");
    $("#ic-post-to-btn2").click();
    equal($('#ic-src-div4').text(), "Bar", "Updated");
  });
</script>

<div id="ic-src-div5" ic-src="/deps_test3/sub">Foo</div>
<button id="ic-post-to-btn3" ic-post-to="/deps_test3">Clicked</button>
<script>
  test("Dependency on updated subpath", function () {
    var text = "Foo";
    Intercooler.addURLHandler({
      "url": "/deps_test3",
      "get": function (url, params) {
        return '<div id="ic-src-div5" ic-src="/deps_test3/sub">' + text + '</div>';
      },
      "post": function (url, params) {
        text = "Bar"
      }
    });
    equal($('#ic-src-div5').text(), "Foo", "Updated");
    $("#ic-post-to-btn3").click();
    equal($('#ic-src-div5').text(), "Bar", "Updated");
  });
</script>

<div id="ic-deps-div1" ic-src="/deps_test4" ic-deps="/deps_test5">Foo</div>
<button id="ic-deps-btn1" ic-post-to="/deps_test5">Clicked</button>
<script>
  test("Explicit dependency works", function () {
    var text = "Foo";
    Intercooler.addURLHandler({
      "url": "/deps_test4",
      "get": function (url, params) {
        return '<div id="ic-deps-div1" ic-src="/deps_test4" ic-deps="/deps_test5">' + text + '</div>';
      }
    });
    Intercooler.addURLHandler({
      "url": "/deps_test5",
      "post": function (url, params) {
        text = "Bar";
      }
    });
    equal($('#ic-deps-div1').text(), "Foo", "Updated");
    $("#ic-deps-btn1").click();
    equal($('#ic-deps-div1').text(), "Bar", "Updated");
  });
</script>

<ul id="ic-prepend-from-div2" ic-prepend-from="/prepend_from1">
  <li>bar</li>
</ul>
<button id="ic-prepend-from-btn1" ic-post-to="/prepend_from1">Clicked</button>
<script>
  test("Explicit dependency works 2", function () {
    var text = "Foo";
    Intercooler.addURLHandler({
      "url": "/prepend_from1",
      "get": function (url, params) {
        return "<li>foo</li>";
      }
    });
    equal($('#ic-prepend-from-div2').text().replace(/[ \n]/g, ''), "bar", "Pre-update");
    $("#ic-prepend-from-btn1").click();
    equal($('#ic-prepend-from-div2').text().replace(/[ \n]/g, ''), "foobar", "Updated");
  });
</script>

<ul id="ic-append-from-div2" ic-append-from="/append_from1">
  <li>bar</li>
</ul>
<button id="ic-append-from-btn1" ic-post-to="/append_from1">Clicked</button>
<script>
  test("Explicit dependency works 2", function () {
    var text = "Foo";
    Intercooler.addURLHandler({
      "url": "/append_from1",
      "get": function (url, params) {
        return "<li>foo</li>";
      }
    });
    equal($('#ic-append-from-div2').text().replace(/[ \n]/g, ''), "bar", "Pre-update");
    $("#ic-append-from-btn1").click();
    equal($('#ic-append-from-div2').text().replace(/[ \n]/g, ''), "barfoo", "Updated");
  });
</script>

<button id="eval-btn" ic-post-to="/frontmatter_eval">Eval</button>
<script>
  test("Eval works", function () {
    Intercooler.addURLHandler({
      "url": "/frontmatter_eval",
      "post": function () {
        return {
          "headers": {
            "X-IC-Script": "window.eval_test_var2 = 10;"
          },
          body: ""
        };
      }
    });
    $("#eval-btn").click();
    equal(window.eval_test_var2, 10);
  });
</script>

<form ic-post-to="/form_target">
  <button id="form-btn">Submit</button>
</form>
<script>
  test("Form submission works", function () {
    Intercooler.addURLHandler({
      "url": "/form_target",
      "post": function () {
        return {
          body: "<span id='form-after-submit'></span>"
        };
      }
    });
    $("#form-btn").click();
    equal($("#form-after-submit").length, 1);
  });
</script>

<div id="fp-test" ic-post-to="/fp_test"><span>Foo</span></div>
<script>
  test("Fingerprint is stable between requests", function () {
    Intercooler.addURLHandler({
      "url": "/fp_test",
      "post": function () {
        return {
          body: '<span>Foo</span>'
        };
      }
    });
    var originalFp = $("#fp-test").attr('ic-fingerprint');
    var t1 = $("#fp-test").html();
    $("#fp-test").click();
    var t2 = $("#fp-test").html();
    var finalFp = $("#fp-test").attr('ic-fingerprint');
    equal(t1, t2);
    equal(originalFp, finalFp);
  });
</script>

<div id="fp-test-2" ic-post-to="/2fp_test"><span>Foo</span></div>
<script>
  test("Fingerprint changes with new content", function () {
    Intercooler.addURLHandler({
      "url": "/2fp_test",
      "post": function () {
        return {
          body: '<span>Bar</span>'
        };
      }
    });
    var originalFp = $("#fp-test-2").attr('ic-fingerprint');
    var t1 = $("#fp-test-2").html();
    $("#fp-test-2").click();
    var t2 = $("#fp-test-2").html();
    notEqual(t1, t2);
    var finalFp = $("#fp-test-2").attr('ic-fingerprint');
    notEqual(originalFp, finalFp);
  });
</script>

<div id="refresh-api-test" ic-src="/refresh-api-test">Foo</div>
<script>
  test("Intercooler.refresh() with element works", function () {
    Intercooler.addURLHandler({
      "url": "/refresh-api-test",
      "get": function () {
        return {
          body: 'Bar'
        };
      }
    });
    Intercooler.refresh($('#refresh-api-test'));
    equal('Bar', $('#refresh-api-test').text());
  });
</script>

<div id="refresh-api-test-2" ic-src="/2refresh-api-test">Foo</div>
<script>
  test("Intercooler.refresh() with path works", function () {
    Intercooler.addURLHandler({
      "url": "/2refresh-api-test",
      "get": function () {
        return {
          body: 'Bar'
        };
      }
    });
    Intercooler.refresh('/2refresh-api-test');
    equal('Bar', $('#refresh-api-test-2').text());
  });
</script>

<div id="define-transition-1" ic-src="/define-transition-test" ic-transition="custom">Foo</div>
<script>
  test("Custom transitions work", function () {
    var counter = 0;
    Intercooler.defineTransition('custom', {
      newContent : function(parent, content, reverse, after) {
        counter++;
        parent.html(content);
        after();
      }
    });
    Intercooler.addURLHandler({
      "url": "/define-transition-test",
      "get": function () {
        return {
          body: 'Bar'
        };
      }
    });
    Intercooler.refresh('/define-transition-test');
    equal('Bar', $('#define-transition-1').text());
    equal(1, counter);
  });
</script>

<div id="define-transition-2" ic-src="/2define-transition-test">Foo</div>
<script>
  test("Default transitions work", function () {
    var counter = 0;
    Intercooler.defineTransition('custom', {
      newContent : function(parent, content, reverse, after) {
        counter++;
        parent.html(content);
        after();
      }
    });
    Intercooler.defaultTransition('custom');
    Intercooler.addURLHandler({
      "url": "/2define-transition-test",
      "get": function () {
        return {
          body: 'Bar'
        };
      }
    });
    Intercooler.refresh('/2define-transition-test');
    equal('Bar', $('#define-transition-2').text());
    equal(1, counter);
    Intercooler.defaultTransition('none');
  });
</script>

<div id="indicator-test" ic-post-to="/indicator"><strong id="indicator1" class="ic-indicator">loading...</strong>  Foo</div>
<script>
  test("Test indicator as class", function () {
    Intercooler.addURLHandler({
      "url": "/indicator",
      "post": function () {
        return {
          body: ''
        };
      }
    });
    $("#indicator-test").click();
    equal('none', $('#indicator1').css('display'));
  });
</script>

<strong id="indicator2">loading...</strong>
<div id="indicator-test-2" ic-post-to="/2indicator" ic-indicator="#indicator2">  Foo</div>
<script>
  test("Test indicator as an attribute", function () {
    Intercooler.addURLHandler({
      "url": "/2indicator",
      "post": function () {
        return {
          body: ''
        };
      }
    });
    $("#indicator-test-2").click();
    equal('none', $('#indicator2').css('display'));
  });
</script>

<strong id="indicator3">loading...</strong>
<div ic-indicator="#indicator3">
  <div id="indicator-test-3" ic-post-to="/3indicator">  Foo</div>
</div>
<script>
  test("Test indicator as an attribute", function () {
    Intercooler.addURLHandler({
      "url": "/3indicator",
      "post": function () {
        return {
          body: ''
        };
      }
    });
    $("#indicator-test-3").click();
    equal('none', $('#indicator3').css('display'));
  });
</script>

<div id="target-target"></div>
<div id="target-test" ic-post-to="/target_test" ic-target="#target-target"></div>
<script>
  test("Target attribute works", function () {
    Intercooler.addURLHandler({
      "url": "/target_test",
      "post": function () {
        return 'foo';
      }
    });
    $("#target-test").click();
    equal('foo', $('#target-target').text());
  });
</script>

<ul id="target-target-append">
  <li>bar</li>
</ul>
<div id="target-test-append" ic-post-to="/append_target_test" ic-transition='append' ic-target="#target-target-append"></div>
<script>
  test("Target attribute works with append", function () {
    Intercooler.addURLHandler({
      "url": "/append_target_test",
      "post": function () {
        return '<li>foo</li>';
      }
    });
    $("#target-test-append").click();
    equal('barfoo', $('#target-target-append').text().replace(/[ \n]/g,''));
  });
</script>

<ul id="target-target-prepend">
  <li>bar</li>
</ul>
<div id="target-test-prepend" ic-post-to="/prepend_target_test" ic-transition='prepend' ic-target="#target-target-prepend"></div>
<script>
  test("Target attribute works with prepend", function () {
    Intercooler.addURLHandler({
      "url": "/prepend_target_test",
      "post": function () {
        return '<li>foo</li>';
      }
    });
    $("#target-test-prepend").click();
    equal('foobar', $('#target-target-prepend').text().replace(/[ \n]/g,''));
  });
</script>


<ul id="prepend-limit" ic-limit-children="3">
</ul>
<div id="prepend-btn" ic-post-to="/prepend_limit" ic-transition='prepend' ic-target="#prepend-limit"></div>
<script>
  test("ic-limit-children works with prepend", function () {
    var i = 0;
    Intercooler.addURLHandler({
      "url": "/prepend_limit",
      "post": function () {
        i++;
        return '<li>' + i + '</li>';
      }
    });
    $("#prepend-btn").click().click().click().click().click().click();
    equal('654', $('#prepend-limit').text().replace(/[ \n]/g,''));
  });
</script>

<ul id="append-limit" ic-limit-children="3">
</ul>
<div id="append-btn" ic-post-to="/append_limit" ic-transition='append' ic-target="#append-limit"></div>
<script>
  test("ic-limit-children works with append", function () {
    var i = 0;
    Intercooler.addURLHandler({
      "url": "/append_limit",
      "post": function () {
        i++;
        return '<li>' + i + '</li>';
      }
    });
    $("#append-btn").click().click().click().click().click().click();
    equal('456', $('#append-limit').text().replace(/[ \n]/g,''));
  });
</script>

<input id="hidden-input" type="hidden" name="hidden" value="foo">
<div id="include-works" ic-post-to="/include_works" ic-include="#hidden-input"></div>
<script>
  test("ic-include works", function () {
    Intercooler.addURLHandler({
      "url": "/include_works",
      "post": function (url, params) {
        return params['hidden'];
      }
    });
    equal('foo', $("#include-works").click().text());
  });
</script>

<input id="trigger-on-works" ic-src="/trigger_test" ic-verb="POST" ic-trigger-on="focus"/>
<script>
  test("ic-trigger-on works", function () {
    Intercooler.addURLHandler({
      "url": "/trigger_test",
      "post": function (url, params) {
        return "foo";
      }
    });
    equal('foo', $("#trigger-on-works").focus().text());
  });
</script>

<span id="ic-verb-btn1" ic-src="/verb_test" ic-verb="PUT" ic-trigger-on="click"></span>
<span id="ic-verb-btn2" ic-src="/verb_test" ic-verb="POST" ic-trigger-on="click"></span>
<script>
  test("ic-verb works", function () {
    Intercooler.addURLHandler({
      "url": "/verb_test",
      "post": function (url, params) {
        return "post";
      },
      "put": function (url, params) {
        return "put";
      }
    });
    equal('put', $("#ic-verb-btn1").click().text());
    equal('post', $("#ic-verb-btn2").click().text());
  });
</script>

<span id="poll-span" ic-src="/poll_test" ic-poll='300ms'></span>
<script>
  asyncTest("ic-poll updates content", function () {
    Intercooler.addURLHandler({
      "url": "/poll_test",
      "get": function () {
        return "updated";
      }
    });

    equal("", $("#poll-span").text());

    setTimeout(function () {
      equal("updated", $("#poll-span").text());
      start();
    }, 500);

  });
</script>

<span id="style-src" ic-style-src="font-style:/style_test" ic-trigger-on="click">Foo</span>
<script>
  test("ic-style-src updates style", function () {
    Intercooler.addURLHandler({
      "url": "/style_test",
      "get": function () {
        return "italic";
      }
    });
    equal("italic", $("#style-src").click().css('font-style'));
  });
</script>


<span id="attr-src" ic-attr-src="foo:/attr_test" ic-trigger-on="click">Foo</span>
<script>
  test("ic-attr-src updates attr", function () {
    Intercooler.addURLHandler({
      "url": "/attr_test",
      "get": function () {
        return "bar";
      }
    });
    equal("bar", $("#attr-src").click().attr('foo'));
  });
</script>


<span id="log-test" ic-post-to="/log_test">Foo</span>
<script>
  test("Log event happens properly", function () {
    var logged = false;
    $('#log-test').on('log.ic', function(e, msg){
      logged = true;
    });
    Intercooler.addURLHandler({
      "url": "/log_test",
      "post": function () {
        return "";
      }
    });
    $("#log-test").click();
    equal(true, logged);
  });
</script>



</div>
</body>
</html>
